<template>
  <div class="container">
    <div class="handle-box">

      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button type="primary" icon="el-icon-delete" class="handle-del mr10 deleteButtons" @click="delAllSelection">批量删除
          </el-button>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-input v-model="keyWord"  placeholder="请输入查询关键字" class="handle-input mr10 searchLabel"/>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button class="searchButton" type="primary"icon="el-icon-search" @click="handleSearch(keyWord)">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData.slice((this.query.currentPage-1)*this.query.pageSize,(this.query.currentPage*this.query.pageSize))"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleCollegeSelectionChange"
                >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.children"  @selection-change="handleClazzSelectionChange">
              <el-table-column width="48"></el-table-column>
              <el-table-column type="selection" align="center"></el-table-column>
              <el-table-column prop="clazzId" label="班级编号" min-width="181" align="center"/>
              <el-table-column prop="name" label="班级名称" min-width="180" align="center"/>
              <el-table-column label="班级操作" min-width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="text" class="editClazzButton" icon="el-icon-plus" @click="handleAdd(scope.$index, scope.row)">添加
                  </el-button>
                  <el-button type="text" class="editClazzButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button type="text"  icon="el-icon-delete" class="red deleteClazzButton" @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="collegeId" label="院系编号" min-width="180" align="center" />
        <el-table-column prop="name" label="院系名称" min-width="180" align="center"/>
        <el-table-column label="院系操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="editCollegeButton" icon="el-icon-plus" @click="handleAdd(scope.$index, scope.row)">添加
            </el-button>
            <el-button type="text" class="editCollegeButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text"  icon="el-icon-delete" class="red deleteCollegeButton" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"/>
      </div>

      <!-- 添加院系弹出框 -->
      <el-dialog title="添加院系信息" :visible.sync="addCollegeVisible" width="30%" >
        <el-form :model="collegeForm" label-width="30%">
          <el-row>
            <el-form-item  label="院系名称">
              <el-input v-model="collegeForm.name" prefix-icon="el-icon-search" placeholder="请输入院系名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="submitCollege">添加</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>


        </el-form>
      </el-dialog>

      <!-- 添加班级弹出框 -->
      <el-dialog title="添加班级信息" :visible.sync="addClazzVisible" width="30%" >
        <el-form :model="clazzForm" label-width="30%" :rules="rule">
          <el-row>
            <el-form-item  label="班级名称">
              <el-input v-model="clazzForm.name" prefix-icon="el-icon-search" placeholder="请输入班级名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="submitClazz">添加</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>


        </el-form>
      </el-dialog>

      <!-- 编辑院系弹出框 -->
      <el-dialog title="编辑院系信息" :visible.sync="editCollegeVisible" width="30%" >
        <el-form :model="collegeForm" label-width="30%">
          <el-row>
            <el-form-item label="院系编号">
              <el-input disabled  prefix-icon="el-icon-search" placeholder="请输入院系编号" v-model="collegeForm.id" autocomplete="off" ></el-input>
            </el-form-item>

          </el-row>
          <el-row>
            <el-form-item  label="院系名称">
              <el-input v-model="collegeForm.name" prefix-icon="el-icon-search" placeholder="请输入院系名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="submitCollege">编辑</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>


        </el-form>
      </el-dialog>

      <!-- 编辑班级弹出框 -->
      <el-dialog title="编辑班级信息" :visible.sync="editClazzVisible" width="30%" >
        <el-form :model="clazzForm" label-width="30%">
          <el-row>
            <el-form-item label="班级编号" >
              <el-input disabled prefix-icon="el-icon-search" placeholder="请输入院系编号" v-model="clazzForm.id" autocomplete="off" ></el-input>
            </el-form-item>

          </el-row>
          <el-row>
            <el-form-item  label="班级名称">
              <el-input v-model="clazzForm.name" prefix-icon="el-icon-search" placeholder="请输入班级名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="submitClazz">编辑</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>


        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import info from '../../utils/info'
  import college from '../../utils/college'
  export default {
    name: 'collegeManage',
    data(){
      return {
        /*展开行*/
        expandList: [],

        keyWord: '',
        addCollegeVisible: false,
        editCollegeVisible: false,
        addClazzVisible: false,
        editClazzVisible: false,
        /* 分页 */
        query: {
          total: 10,
          pageSize: 7,
          currentPage: 1,
        },
        collegeForm: {
          id: '',
          name: ''
        },
        clazzForm: {
          id: '',
          name: ''
        },
        tableData: [],
        multipleCollegeSelection: [],
        multipleClazzSelection: [],
        delList: [],
        idx: -1,
        id: -1,
        college: {
          collegeId: '',
          name: '',
        },
        collegeList: [],
        clazzList: [],
        formLabelWidth: '30%',

        /* 数据校验 */
        rule: {

        }
      }
    },
    created() {
      this.getData();
    },
    mounted(){
    },
    methods: {
      getData() {
        this.tableData = college.colleges;
        this.query.total = college.colleges.length;
      },

      handleAdd(index,row){
        //判断是操作院系还是操作班级
        // if(row.children == null){
        //   // 说明 row.id是学院id
        //   // 操作学院
        //   console.log("hahah")
        //   console.log(!row.children === undefined)
        //   console.log(this.addCollegeVisible)
        //   this.addCollegeVisible = true;
        // }
        // console.log("heiheihei")
        if(row.children === undefined){
          // 操作班级
          console.log("班级")
          this.addClazzVisible = true;
        }else{
          console.log("学院")
          this.addCollegeVisible = true;
        }

      },

      // 编辑操作
      handleEdit(index, row) {
        if(row.children === undefined){
          // 操作班级
          console.log("班级")
          this.idx = index;
          this.clazzForm = row;
          this.editClazzVisible = true;
        }else{
          console.log("学院")
          this.idx = index;
          this.collegeForm = row;
          this.editCollegeVisible = true;
        }
      },

      // 触发搜索按钮
      handleSearch(keyWord) {
        // 发送查询请求,查询内容为keyWord
        // 获取返回数据然后渲染表格
        this.getData();
      },
      // 删除操作
      handleDelete(index, row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            if(row.children === undefined){
              // 操作班级
              console.log("班级:" + row.id)
              // 发送请求删除班级
              this.$message.success('删除班级成功!');
            }else{
              // 操作学院
              console.log("学院:" + row.id)
              // 发送请求删除学院
              this.$message.success('删除学院成功!');
            }
          })
          .catch(() => {
            this.$message.success('删除失败!');
          });
      },

      // college多选
      handleCollegeSelectionChange(val){
        this.multipleCollegeSelection = val
        // console.log(val)
      },
      // clazz多选
      handleClazzSelectionChange(val){
        this.multipleClazzSelection = val
      },
      // 多删
      delAllSelection() {
        // 获得多选删除的id数组
        const collegeLength = this.multipleCollegeSelection.length;
        const clazzLength = this.multipleClazzSelection.length;
        if(collegeLength === 0 && clazzLength === 0){
          this.$message.error(`请选择要删除的对象`);
        }else{
          for(let i = 0;i < this.multipleCollegeSelection.length;i++){
              let collegeId = this.multipleCollegeSelection[i].collegeId;
              let name = this.multipleCollegeSelection[i].name;
              let college =
                {
                  "collegeId":collegeId,
                  "name":name
                }
              this.collegeList.push(college);
          }

          console.log(this.collegeList);

          for(let i = 0;i < this.multipleClazzSelection.length;i++){
            let clazzId = this.multipleClazzSelection[i].clazzId;
            let name = this.multipleClazzSelection[i].name;
            let clazz =
              {
                "clazzId": clazzId,
                "name": name,
              }
            this.clazzList.push(clazz);
          }
          console.log(this.clazzList);

          // 合并数组 发到后台
          //todo 发送删除请求
        }

      },

      // 分页导航
      handlePageChange(val) {
        /* 更换当前页 */
        this.$set(this.query, 'currentPage', val);
        /*this.getData();*/
      },

      handleExpand(index){
        console.log("哈哈哈:" + index);
      },

      // 提交表单
      // 提交学院表单
      submitCollege(){
        // 提交学院表单
        //console.log(this.collegeForm);

        // 发送请求,刷新数据

        this.$message.success("提交成功!");
        this.collegeForm = {};
        this.addCollegeVisible = false;
        this.editCollegeVisible = false;
      },

      // 提交班级表单
      submitClazz(){
        //console.log(this.clazzForm);
        // 发送班级提交数据
        this.$message.success("提交成功!");
        this.clazzForm = {};
        this.addClazzVisible = false;
        this.editClazzVisible = false;
      },

      // 取消表单
      cancel(){
        this.addClazzVisible = false;
        this.addCollegeVisible = false;
        this.editCollegeVisible = false;
        this.editClazzVisible = false;
      },

    },
    watch: {

      addCollegeVisible(){
        if(this.addCollegeVisible === false){
          this.collegeForm = {};
        }
      },
      editCollegeVisible(){
        if(this.editCollegeVisible === false){
          this.collegeForm = {};
        }
      },
      addClazzVisible(){
        if(this.addClazzVisible === false){
          this.clazzForm = {};
        }
      },
      editClazzVisible(){
        if(this.editClazzVisible === false){
          this.clazzForm = {};
        }
      },
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }


  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .time{
    width: 100%;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  /* 按钮大小 */
  .editCollegeButton,.deleteCollegeButton{
    font-size: 14px;
  }
  .editClazzButton,.deleteClazzButton{
    font-size: 12px;
  }

  .searchLabel{
    margin-left: 40%;
  }

  .searchButton{
    margin-left: 0;
  }
  .test{
    background-color: pink;
  }


</style>
